<template>
    <div class="entrylist">
        <ul class="perkinsindexlist">
            <router-link class="perkinlist-item" to="power" tag="li">
                <img src="./nav1.png">
            </router-link>
            <router-link class="perkinlist-item" to="industria" tag="li">
                <img src="./nav2.png">
            </router-link>
            <router-link class="perkinlist-item" to="gas" tag="li">
                <img src="./nav3.png">
            </router-link>
        </ul>
        <router-view></router-view>
    </div>
</template>

<style lang="less" rel="stylesheet/less">
    @import '../../common/less/index.less';

    .perkinsindexlist{
        margin: 20px 15px 0;
        position: absolute;

        li{
            list-style-type: none;
            margin-bottom: 10px;
            img{
                width: 100%;
            }
        }
    }
    .perkins-list{
        position: absolute;
        top: 45px;
        bottom: 0;
        overflow: hidden;
        width: 100%;
        background: #f2f2f2;
    }

    .page-cell{background-color: #fff;}

    .mint-cell{
        margin: 0 15px;
        .border-bottom-1px(@color-border);
        padding-bottom: 15px;
        .mint-cell-con{
            padding-top: 15px;
            display: flex;
        }
        .part-img{
            flex: 0 0 120px;
            width: 120px;
            height: 95px;
            border: 1px solid @color-border;

        }
        &:last-child{
            .border-none();
            
        }
    }

    .mint-cell-text{
        flex: 1;
        font-size: @font-size-small;
        color: @color-text-666;
        padding-left: 10px;
        box-sizing: border-box;
        line-height: @font-size-meduim-x;
        strong{
            display: block;
            color: @color-text-333;
            font-size: @font-size-meduim;
            margin-bottom: 8px;
        }
        span{
            display: block;
        }
    }

    

    .loading-container{
        position: absolute;
        width: 100%;
        top: 50%;
        transform: translateY(-50%);
        z-index: 888;
    }
    
    .filtrateTab{
        display: flex;
        height: 45px;
        background-color: #fff;
         .border-bottom-1px(@color-border);
        .filtrate-tab-item{
            flex: 1;
            text-align: center;
            display: block;
            overflow: hidden;
            .border-right-1px(@color-border);
            height: 25px;line-height: 25px;
            margin-top: 10px;
            font-size: @font-size-small-s;
            &:last-child{.border-none();}
            span{
                display: inline-block;
                width: 70%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                position: relative;
                padding-right: 10px;
                }
             }
    }
    .drop{
        position: absolute;
        transition: all 6s;
        top:45px;
        width: 100%;
        bottom: 0;
        z-index: 6666;
        ul{
            z-index: 67;
            position: relative;
            background-color: @color-bg-white;
            width: 100%;
            .dropitem{
                .border-bottom-1px(@color-border);
                height: 44px;
                line-height: 44px;
                text-indent: 14px;
                &.act{
                    color: @color-bg-active;
                }
            }
        }
        .mask-black{
            width: 100%;
            position: absolute;
            top: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
        }
    }

    .mint-cell-allow-donw:after {
        font-size: @font-size-small;
        transition: all .3s;
        border: 2px solid #c8c8cd;
        border-bottom-width: 0;
        border-left-width: 0;
        content: " ";
        top: 50%;
        right: 5px;
        position: absolute;
        width: 5px;
        height: 5px;
        transform: translateY(-80%) rotate(135deg);
    }
    .active{
        color: @color-bg-active;
        .mint-cell-allow-donw:after{
            transform: translateY(-80%) rotate(-45deg);
            border-color:@color-bg-active;
        }
    }
    .top-tip{
        position: absolute;  
        top: -40px;  
        left: 0;
        z-index: 1;  
        width: 100%;  
        height:40px;  
        line-height:40px;  
        text-align:center;
        color: #555;font-size: 12px;
    } 
      
    .bottom-tip{
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        color: #777;font-size: 12px;
        background: #f2f2f2;
    }
    .alert{
        display: none;
        position: fixed;
        top: 55px;
        left: 0;
        z-index: 2;
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        color: #fff;
        font-size: 12px;
        background: rgba(7, 17, 27, 0.7);
    }
</style>